<template>
  <div class="send_index">
    <div class="send_index_top">
      <div class="into_index">
        首页
        <i class="el-icon-close"></i>
      </div>
      <div class="current">
        待处理
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="send_index_bottom">
      <div class="send_index_bottom_new">
        <div class="send_index_bottom_new_goods">
          <div class="send_index_bottom_new_goods_btn"></div>
          <div class="send_index_bottom_new_goods_screening">
            <div class="send_index_bottom_new_goods_screening_left">
              <i>下单时间</i>
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                @change="selectTime"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </div>
            <div class="send_index_bottom_new_goods_screening_right">
              <el-input
                v-model="input"
                @input="clearInput"
                clearable
                placeholder="请输入订单信息查询"
              ></el-input>
              <button @click="searchBtn"><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="send_index_bottom_table_box">
        <div class="send_index_bottom_table">
          <table>
            <tr>
              <th>序号</th>
              <th>订单号</th>
              <th>下单时间</th>
              <th>下单人</th>
              <th>手机号</th>

              <th>操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>{{ v.order_code }}</td>
              <td>{{ v.order_no }}</td>
              <td>{{ v.create_time | dateformat("YYYY-MM-DD HH:mm:ss") }}</td>
              <td>{{ v.realname }}</td>
              <td>{{ v.phone }}</td>
              <td>
                <button class="editor" @click="_toShopInfo" :data-id="v.id">
                  详情
                </button>
                <!-- <button class="shelves">发货</button> -->
                <!-- <button class="delete">关闭订单</button> -->
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="8">当前数据空空如也</td>
            </tr>
          </table>
        </div>
        <div class="send_index_bottom_page">
          <div class="send_index_bottom_page_left"></div>
          <div class="send_index_bottom_page_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      checkAll: false,
      checkBoxAll: [], // 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      startDate: "",
      endDate: "",
      sid: null,
    };
  },
  mounted() {
    this.sid = localStorage.getItem("sid");
    this._getOrdersList();
  },
  methods: {
    // 选择时间
    selectTime() {
      const that = this;
      if (that.value2) {
        that.startDate = that
          .$moment(that.value2[0])
          .format("yyyy-MM-DD HH:mm:ss");
        that.endDate = that
          .$moment(that.value2[1])
          .format("yyyy-MM-DD HH:mm:ss");
      } else {
        (that.startDate = ""), (that.endDate = "");
      }
      that.page = 1;
      that.pagesize = 10;
      that._getOrdersList();
    },

    // 搜索按钮
    searchBtn() {
      const that = this;
      that.page = 1;
      that.pagesize = 10;
      that._getOrdersList();
    },
    // 清除搜索
    clearInput() {
      const that = this;
      if (that.input == "") {
        that.page = 1;
        that.pagesize = 10;
        that._getOrdersList();
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.page = 1
      this._getOrdersList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this._getOrdersList();
    },
    // 跳转到详情页
    // handerDetails(){
    // 	this.$router.push({path:'/sendDetails'});
    // },
    // 获取待处理订单列表
    _getOrdersList() {
      let role = localStorage.getItem("role");
      let params = {
        designer_id: role == "decoration" ? "" : this.sid,
        decoration_id: role == "decoration" ? this.sid : "",
        status: 2,
        keyword: this.input,
        start_date: this.startDate,
        end_date: this.endDate,
        page: this.page,
        pagesize: this.pagesize,
      };
      let url =
        role == "decoration"
          ? "/api/admin/decoration/DesignOrder/index"
          : "/api/admin/designer/DesignerOrder/index";
      this.$http.post(url, params).then((res) => {
        console.log(res, "待处理订单");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total; //总条数
        }
      });
    },

    //点击详情跳转
    _toShopInfo(e) {
      console.log(e);
      let order_id = e.target.dataset.id;
      this.$router.push({ path: `/disposeDetail?order_id=${order_id}` });
    },
  },
};
</script>

<style lang="less" scoped="scoped">
@import "index.less";
</style>
